<template>
    <span :class="[txtColor, 'num-txt', isBold ? 'num-bold' : '']">
        <span v-if="!showEmpty">
            <span v-if="num > 0">
                {{ `${isAdd && num > 0 ? '+' : ''}${prefix}${numFormat(num)}` }}
            </span>
            <span v-else-if="num < 0">
                {{ `-${prefix}${numFormat(Math.abs(num))}` }}
            </span>
            <span :class="[isZeroColor ? 'win-color' : '']" v-else-if="num == 0 || num == null">
                {{ zeroAccord }}{{ showZero }}
            </span>
        </span>
        <span v-if="showEmpty">
            <span v-if="num > 0">
                {{ `${isAdd && num > 0 ? '+' : ''}${prefix}${numFormat(num)}` }}
            </span>
            <span v-else-if="num < 0">
                {{ `-${prefix}${numFormat(Math.abs(num))}` }}
            </span>
            <span v-else-if="num == 0 || num == null">
                {{ isZeroEmpty }}
            </span>
        </span>
    </span>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { formatBigNumber, numberWithCommas } from "@/comm/format";
import CountUp from "vue-countup-v3";
const numFormat = (num: any) => {
    if (props.type == 0) {
        return formatBigNumber(num, 2)
    }
    return num
}

const txtColor = computed(() => {
    if (props.isColor) {
        if (props.num == 0) {
            return "normal-color";
        }
        if (props.num < 0) {
            return "lose-color";
        }
        if (props.num > 0) {
            return "win-color";
        }
        return "lose-color";
    }
    return "";
});

const props = defineProps({
    num: {
        default: 0
    },
    isColor: {
        type: Boolean,
        default: false
    },
    isBold: {
        type: Boolean,
        default: false
    },
    /**前面加字符串 */
    prefix: {
        type: String,
        default: ""
    },
    /**是否显示+号 */
    isAdd: {
        type: Boolean,
        default: false
    },
    type: {
        type: [String, Number],
        default: 0
    },
    showZero: {
        type: [String, Number],
        default: '0.00'
    },
    isZeroColor: {
        type: Boolean,
        default: false,
    },
    zeroAccord: {
        type: String,
        default: ''
    },
    isZeroEmpty: {
        type: String,
        default: '-'
    },
    showEmpty: {
        type: Boolean,
        default: false
    }
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
